const canvas = document.getElementById('canvas');
content = canvas.getContext("2d");
brushRadius = (canvas.width / 100) * 5;
img = new Image();

if(brushRadius < 24){
    brushRadius = 24;
}

img.onload = function(){
    content.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = './img/masking.jpg';

function getBrushPos(xRef, yRef){
    let canvasReact = canvas.getBoundingClientRect();
    return {
        x : xRef - canvasReact.left,
        y : yRef - canvasReact.top
    }
}

function drawDot(mouseX, mouseY){
    content.beginPath();
    content.arc(mouseX, mouseY, brushRadius, 0, 2*Math.PI, true);
    content.fillStyle = '#000';
    content.globalCompositeOperation = "destination-out";
    content.fill();

}


canvas.addEventListener('mousemove', (e)=>{
    let brushPos = getBrushPos(e.clientX, e.clientY);
    if(e.buttons === 1){
        drawDot(brushPos.x, brushPos.y);
    }
})
